<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script>
    <title>Title</title>
</head>
<body>
<div id="app">
    <app1  v-bind:text="age"></app1>
    <text-slot></text-slot>
</div>

<script>
    let vm  = new Vue({
        el:"#app",
        data:{
            "message":"hello",
            age:15
        },
        components:{
            "app1":{
                //props 传值 子组件调用父组件的message
                props:{
                    text:{
                        type:Number,
                        required: true
                    }

                },
                "template":"<div v-on:click='doThis' >div{{name}}---{{text}} <slot name='a'>ddd</slot>" +
                    "<slot name='header1'> 这是头部</slot>" +
                "</div>",
                data:function(){
                    let data = {"name":"zhangsan"};
                    return data;
                },
                methods:{
                    doThis:function(){
                        console.log(this.age)
                    }
                }

            },
            'text-slot':{
                'template':"<header> <slot name='header'>头部</slot>header</header>",
            }
        }
    })
</script>
</body>
</html>